<template>
	<view class="content">
		<view class="t1">
				<text style="color: darkgreen; font-weight: bold;">单选题:</text>
		</view>
		<view class="single">
			<view class="qList" v-for="(item,index) in sQuestionList" :key="item.questionId">
				<button @click="choose" :data-qid="item.questionId" :class="selection[index+1] >= 1 && selection[index+1] <= 4? 'btn2':'btn1'">{{item.questionId}}</button>
			</view>
		</view>
		<view class="t2">
				<text style="color: orange; font-weight: bold;">填空题:</text>
		</view>
		<view class="fillBlank">
			<view class="qList" v-for="(item,index) in fQuestionList" :key="item.questionId">
				<button @click="choose" :data-qid="item.questionId" :class="selection[index+sAll+1] >= 1 && selection[index+sAll+1] <= 4? 'btn2':'btn1'">{{item.questionId}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sQuestionList:[],
				fQuestionList:[],
				selection:[],
				sAll:0
				
			}
		},
		methods: {
			listSingle:function(){
				var that = this;
				//挂载后给服务端发请求
				uni.request({
					url:"http://localhost:8888/singleQuestion",
					success(res){
						if(res.data.code==200){
							that.sQuestionList = res.data.data;
							that.$forceUpdate();
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			singleNum:function(){
				var that = this;
				uni.request({
					url:"http://localhost:8888/singleNum",
					success(res) {
						if(res.data.code==200){
							that.sAll=res.data.data[0].sAll;
							console.log("count:"+that.sAll);
							that.$forceUpdate();
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			listFill:function(){
				var that = this;
				//挂载后给服务端发请求
				uni.request({
					url:"http://localhost:8888/FillQuestion",
					success(res){
						if(res.data.code==200){
				
							that.fQuestionList = res.data.data;
							that.$forceUpdate();
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			choose:function(e){
				console.log(e);
				uni.setStorageSync('qid',e.target.dataset.qid);
				uni.navigateBack({
					delta: 1
				});
			}
		},
		onLoad(options) {
			if(options.selection){
				this.selection=JSON.parse(decodeURIComponent(options.selection));
			}
		},
		mounted() {
			this.singleNum();
			this.listSingle();
			this.listFill();		
		}
	}
</script>

<style>
	.content{
		display: flex;
		flex-direction: column;
	}
	.single{
		width: 600rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding-bottom: 20px;
	}
	.fillBlank{
		width: 600rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding-bottom: 20px;
	}
	.t1{
		display: flex;
		padding-bottom: 20px;
	}
	.t2{
		display: flex;
		padding-bottom: 20px;
	}
	.qList{
		height: 50px;
		width: 50px;
		border-radius: 50px;
	}
	.btn1{
		height: 50px;
		width: 50px;
		border-radius: 50px;
		background-color: darkgray;
		color: white;
	}
	.btn2{
		height: 50px;
		width: 50px;
		border-radius: 50px;
		background-color: dodgerblue;
		color: white;
	}
</style>
